<template>
  <div>
    <!-- 推荐列表 -->
    <el-dialog
      width="900px"
      title="推荐列表"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <el-row style="margin-bottom: 10px"> </el-row>
      <el-table   ref="TableRef"  :data="tableData">
        <!-- 商家名称 商家地址 商家电话 商家邮箱 审批状态 -->
        <!-- 商家名称 -->
        <el-table-column
          show-overflow-tooltip
          align="center"
          :label="$t('商家名称')"
          prop="distrName"
        />
        <!-- 商家地址 -->
        <el-table-column
          show-overflow-tooltip
          align="center"
          label="商家地址"
          prop="address"
        />
        <!-- 商家电话 -->
        <el-table-column
          show-overflow-tooltip
          align="center"
          label="商家电话"
          prop="tel"
        />
        <!-- 商家邮箱 -->
        <el-table-column
          show-overflow-tooltip
          align="center"
          label="商家邮箱"
          prop="email"
        />
        <!-- 审批状态 -->
        <el-table-column
          show-overflow-tooltip
          align="center"
          :label="$t('审批状态')"
          prop="审批状态"
        >
          <!-- 审核状态 applyStatus 1-待审批 2-审批通过 3-审批拒绝 -->
          <template slot-scope="{ row }">
            <span v-if="row.applyStatus == 1" style="color: orange">
              待审批
            </span>
            <span v-if="row.applyStatus == 2" style="color: green">
              审批通过
            </span>
            <span v-if="row.applyStatus == 3" style="color: red">审批拒绝</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { checkOps } from "@/api/platform/supplierManage";
import { getReferrerList } from "@/api/platform/supplierManage";
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: {},
    },

    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      form: {},
      // 表单校验
      rules: {
        // distrId: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
    };
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList();
        if (this.type == "edit") {
          Object.keys(this.formData).forEach((key) => {
            this.form[key] = this.formData[key];
          });
          console.log(`this.form ==>`, JSON.parse(JSON.stringify(this.form)));
        }
      }
    },
  },
  methods: {
    getList() {
      getReferrerList({ id: this.formData.id }).then((res) => {
        const { code, rows, total } = res;
        if (code === 200) {
          this.tableData = rows;
          this.total = total;
        }
      });
    },

    handleSubmit() {},
    cancel() {
      this.$emit("update:show", false);
    },
  },
};
</script>
<style scoped lang="scss"></style>
